<template>
    <div class="go"><van-icon @click="go" name="arrow-left" /></div>
    <div class="loginregister">
        <div class="box">
            <div class="cut">
                <router-link to="/loginregister/login" replace>
                    <div class="left">登录</div>
                </router-link>
                <router-link to="/loginregister/register" replace>
                    <div class="right">注册</div>
                </router-link>
            </div>
            <div class="item">
                <!-- <transition> -->
                <router-view></router-view>
                <!-- </transition> -->
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
let router = useRouter();
// router.push((path = "/"));
let go = () => {
    router.push({
        path: "/",
    });
};
</script>

<style lang="scss" scoped>
.go {
    box-sizing: border-box;
    font-size: 1.25rem;
    padding: 10px;
}
.loginregister {
    width: 100%;
    height: 100%;
    .item {
        margin-top: 0.625rem;
        .v-enter-from,
        .v-leave-to {
            transform: translateX(-50px);
            opacity: 0;
        }
        .v-enter-active {
            transition: all 0.3s;
        }
        .v-enter-to,
        .v-leave {
            opacity: 1;
            transform: translateX(0px);
        }
        .v-leave-to {
            transform: translateX(50px);
        }
        .v-leave-active {
            transition: all 0s;
        }
    }
    .box {
        box-sizing: border-box;
        padding: 0.625rem;
        width: 90%;
        margin: 6.25rem auto;
        height: 400px;
        // background-color: pink;
    }
    .cut {
        border: 1px solid #eee;
        border-radius: 2rem;
        width: 100%;
        height: 2.8125rem;
        display: flex;
        a {
            display: block;
            flex: 1;
            height: 100%;
            &.router-link-active {
                div {
                    color: #ff9092;
                    background-color: white;
                }
            }
        }
        div {
            background-color: #ffd1d1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            color: #ffffff;
            &.active {
                color: blue;
            }
        }
        .left {
            border-radius: 2rem 0 0 2rem;
        }
        .right {
            border-radius: 0 2rem 2rem 0;
        }
    }
}
</style>
